<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common"></div>
    <style>
        .background{
            position: absolute;
            box-shadow: 8px 8px #b3e5fc;
            background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9);
        }
        .main {
            border-radius: 15px;
            margin: 10%;
        }
        .center {
            width: 40%;
            height: 80%;
            margin-left: 30%;
            top: 8%;
        }
        .video-background {
            position: relative;
            overflow: hidden; /* 确保子元素不会超出容器 */
            /* 根据需要设置高度和宽度 */
            height: 100vh; /* 例如，设置为视口高度的100% */
            width: 100%;

        }
        .video-background video {
            /* 使视频覆盖整个容器 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -100; /* 确保视频在内容下方 */
            background: url('https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/img-bg@2x.png') no-repeat; /* 备用图片，以防视频不支持 */
            background-size: cover;
        }
        .btn-sm{
            font-size: 14px;
        }
    </style>
</head>
<body>
<!--<div class="video-wrap back_image">-->
<!--    <video class="video-wrap__video" poster="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/img-bg@2x.png"-->
<!--           src="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/bg-video.mp4" tabindex="-1" autoplay="" muted="">-->
<!--    </video>-->
<!--</div>-->
<div class="video-background">
    <video autoplay loop muted playsinline>
        <source src="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/bg-video.mp4" type="video/mp4">
        <!--        <source src="path/to/your/video.webm" type="video/webm">-->
        <!-- 视频无法加载时显示的图片 -->
        <img src="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/img-bg@2x.png" alt="Video Fallback Image">
    </video>

    <div class="background zyl_lofo_main center">
        <form class=" main " action="/user/register" method="post">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" name="name">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" class="form-control" name="password">
            </div>
            <!--    <div class="form-group">-->
            <!--        <label>账户余额</label>-->
            <!--        <input type="text" class="form-control" name="money">-->
            <!--    </div>-->
            <div class="form-group">
                <label>角色</label>
                <input type="radio" name="role" value="3" checked/>用户
            </div>
            <div class="form-group">
                <label>头像</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-upload-list">
                            <img width="100px" height="100px" class="layui-upload-img" id="demo1">
                            <input type="hidden" name="image" id="imageId">
                            <p id="demoText"></p>
                        </div>
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>状态</label>
                <input type="radio" name="status" value="1" checked/>正常
            </div>
            <div>
            <input class="btn btn-primary" type="submit" value="注册">
            <a class="btn btn-sm btn-primary" href="/user/toLogin">返回</a>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['upload'], function () {
        var upload = layui.upload;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload/uploadImage' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (result) {
                if (result.ok) {
                    $('#imageId').val(result.data);
                    $('#demoText').html(''); //置空上传失败的状态
                } else {
                    mylayer.errorMsg(result.msg);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

    });
</script>
</body>
</html>